<template>
  <el-form-item
    v-if="!item.disabled"
    :key="item.keyword"
    :label-width="item.labelWidth"
    :class="{'mobile-form-item':showMobilePage}"
    prop="content"
    class="input-form-item">
    <div slot="label" :title="item.name" class="ellipsisTwo input-form-label">{{ item.name }}</div>
    <el-input
      v-if="item.type === 'input'"
      v-model="value[item.keyword]"
      :placeholder="item.placeholder || '请输入内容'"
      :type="item.inputType || 'text'"
      :class="item.class"
      :maxlength="item.lengthLimit ? (item.maxLength || 100) : null"
      style="font-size: 13px;"
      size="small"
      clearable
      @keyup.enter.native="queryClick"
      @change="queryClick"
      @clear="queryClick"
      @dblclick.native="handleDoubleClick($event, item)"/>
    <el-number-range
      v-if="item.type === 'inputRange'"
      :unit="item.unit"
      :only-integer="item.onlyInteger"
      :start-placeholder="item.startPlaceholder"
      :end-placeholder="item.endPlaceholder"
      v-model="value[item.keyword]"
      :max="item.max"
      :min="item.min"
      clearable
      @keyup.enter.native="queryClick"
      @onChange="queryClick"
      @clear="queryClick"/>
    <selectWithoutHttp
      v-if="item.type === 'inputSearch'"
      v-model="value[item.keyword]"
      :remote-method="masketList"
      :list-data="marketOption"
      :placeholder="item.placeholder || '请输入内容'"
      filterable
      remote
      clearable
      @changeInfo="queryClick($event, item)"
    />
    <div v-if="item.type === 'conditionInput'" class="flex-center width240">
      <el-select v-model="condition" class="condition-select" size="small">
        <el-option
          v-for="opt in conditionOptions"
          :key="item.valueName ? opt[item.valueName] :opt.value"
          :title="item.labelName ? opt[item.labelName] : opt.label"
          :label="item.labelName ? opt[item.labelName] : opt.label"
          :value="item.valueName ? opt[item.valueName] : opt.value" />
      </el-select>
      <el-input
        v-model="value[item.keyword]"
        :placeholder="item.placeholder || '请输入内容'"
        :type="item.inputType || 'text'"
        :class="item.class"
        :maxlength="item.lengthLimit ? (item.maxLength || 100) : null"
        style="font-size: 13px;flex: 1;margin-left: 4px;"
        size="small"
        clearable
        @keyup.enter.native="queryClick"
        @change="queryClick"
        @clear="queryClick"
        @dblclick.native="handleDoubleClick($event, item)"/>
    </div>
    <div v-if="item.showAppend" class="append-value"><slot name="append"/></div>
  </el-form-item>
</template>

<script>
import selectWithoutHttp from '@/components/Common/selectWithoutHttp';
import elNumberRange from './module/numberRange';
import { getMarket } from '@/api/select';
import { mapState } from 'vuex';
import mixins from './mixins';

export default {
  components: { elNumberRange, selectWithoutHttp },
  mixins: [mixins],
  props: {
    item: {
      type: Object,
      default: () => {
        return {};
      }
    },
    value: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      marketOption: []
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage,
      'userInfo': state => state.user.userInfo
    })
  },
  methods: {
    queryClick(e, item) {
      if (typeof e === 'object' && e.value) {
        this.value[item.tagName] = e.value;
      }
      this.$emit('queryClick');
    },
    // 获取销售人/策划执行人的列表
    masketList(query = null) {
      getMarket(query).then(res => {
        if (res.code === 200) {
          this.marketOption = res.data;
        }
      });
    },
    handleDoubleClick(e, item) {
      // 双击填充当前用户名或指定值（item.fillValue）
      if (item.doubleClick) {
        const fillValue = item.fillValue || this.userInfo.userName;
        this.$set(this.value, item.keyword, fillValue);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.input-form-item {
  position: relative;
  &::v-deep {
    .el-input__inner {
      padding-left: 8px;
    }
    .el-form-item__label {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      height: 32px;
    }
  }
  .input-form-label {
    line-height: 1.2 !important;
  }
  .append-value {
    position: absolute;
    bottom: -24px;
    ::v-deep .el-checkbox__label {
      font-size: 12px;
      padding-left: 4px;
    }
    ::v-deep .el-checkbox {
      color: #606266;
    }
  }
}
.condition-select {
  width: 85px;
  &::v-deep {
    .el-input__inner {
      padding-right: 30px;
    }
    .el-input {
      width: 85px !important;
    }
  }
}
.mobile-form-item {
  &::v-deep {
    .el-form-item__label {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      height: 32px;
    }
  }
}
.width240 {
  width: 240px;
}
</style>
